<template>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery" >
          <a-row :gutter="24">
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="资源名称">
                <a-input placeholder="请输入资源名称" v-model="queryParam.resourceName" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="所有项目" >
                <a-select
                  placeholder="搜索下拉"
                  v-model="queryParam.projectName"
                  show-search
                  @search="handleChange('1', $event)"
                  @change="onchanges"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="item in arr" :key="item.id">{{ item.projectName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :xl="7" :lg="7" :md="8" :sm="24">
                <a-form-item label="所属文件夹" >
                  <a-select
                    placeholder="搜索下拉"
                    v-model="queryParam.folderName"
                 
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    @search="handleChange('2', $event)"
  
                  >
                    <a-select-option :value="item.id" v-for="item in folderlist" :key="item.id" >{{ item.folderName }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xl="7" :lg="7" :md="8" :sm="24">
                <a-form-item label="资源类型">
                  <a-select
                    placeholder="搜索下拉"
                    v-model="queryParam.fileSuffix"
                    show-search
                    @search="handleChange('3', $event)"
                  >
                    <a-select-option :value="item" v-for="(item, index) in filelist" :key="index">{{
                      item
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xl="7" :lg="7" :md="8" :sm="24">
                <a-form-item label="创建时间">
                  <a-range-picker
                    v-model="queryParam.birthdayRange"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onBirthdayChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :xl="7" :lg="7" :md="8" :sm="24">
                <a-form-item label="是否已分享">
                  <a-select placeholder="搜索下拉" v-model="queryParam.isShare">
                    <a-select-option value="1">是</a-select-option>
                    <a-select-option value="2">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset('2')" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
  
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="Black" type="primary">返回上一页</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />批量删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
        </a-dropdown>
      </div>
  
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
          >项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
  
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          @change="handleTableChange"
        >
          <!-- <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定删除吗?" @confirm="() => handledelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handledown(record)">下载</a>
  
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="detailFormOk(record)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="shareAdd(record)">分享</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span> -->
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-card>
  </template>
  
  <script>
  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { downLodaImg, getAction,deleteAction } from '@/api/manage'
  import { nextTick } from 'vuedraggable'
  export default {
    name: 'BusTreviRiverPcList',
    mixins: [JeecgListMixin],
    components: { },
    data() {
      return {
        description: '资源列表',
        value: '',
        // 表头
        columns: [
          {
            title: '资源名称',
            align: 'center',
            dataIndex: 'resourceName'
          },
          {
            title: '所属项目',
            align: 'center',
            dataIndex: 'projectName'
          },
          {
            title: '所属文件夹',
            align: 'center',
            dataIndex: 'folderName'
          },
          {
            title: '资源类型',
            align: 'center',
            dataIndex: 'fileSuffix'
          },
        //   {
        //     title: '操作',
        //     dataIndex: 'action',
        //     align: 'center',
        //     scopedSlots: { customRender: 'action' }
        //   }
        ],
        url: {
          list: `/resource/busResource/list?creator=${localStorage.getItem('userid')}`,
          delete: '/resource/busResource/delete',
          deleteBatch: '/resource/busResource/deleteBatch',
          download: '/file/Download/download',
          pjtselect: '/bus/busProject/projectNameList', //所有项目
          busFolder: '/bus/busFolder/folderNameList', //所属文件夹
          fileLists: '/file/file/resourceNameList' //资源类型
        },
        arr: [], //所有项目下拉数据
        folderlist: [],
        filelist: [],
        types: '',
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    created(){
        this.queryParam.projectName = this.$route.query.id
      this.queryParam.folderName = this.$route.query.ids
      this.toggleSearchStatus = true
    },
    mounted() {
        this.loadData(this.queryParam.projectName,this.queryParam.projectName)
      this.projectNameList()
      this.folderNameList()
      this.resourceNameList()

      console.log(this.loadData(this.queryParam.projectName),'tttttttttttttttt');
    },
    methods: {
      //所有项目下拉
      projectNameList(name) {
        console.log(name, 'name')
        const httpurl = this.url.pjtselect
        const method = 'get'
        const params = {
          projectNidame: name
        }
        getAction(httpurl, params, method).then(res => {
          this.arr = res.result
        })
      },
      //所属文件夹下拉
      folderNameList(name,type) {
        console.log(type,'type');
        const httpurl = this.url.busFolder
        const method = 'get'
        let params
        if(type == 'type')
        {
           params = {
            projectId: name
        }
        }else
        {
           params = {
          folderName: name
        }
        }
       
        getAction(httpurl, params, method).then(res => {
          this.folderlist = res.result
        })
      },
      //资源类型
      resourceNameList(name) {
        const httpurl = this.url.fileLists
        const method = 'get'
        const params = {
          fileSuffix: name
        }
        getAction(httpurl, params, method).then(res => {
          this.filelist = res.result
        })
      },
      //搜索事件
      handleChange(type, e) {
         if (type == 1) {
          this.projectNameList(e)
        } else if (type == 2) {
          this.folderNameList(e)
        } else if (type == 3) {
          this.resourceNameList(e)
        }
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      //所有项目进行选择事件
      onchanges(e)
      {
        this.folderNameList(e,'type')
      },
      //下载
      handledown(record) {
        localStorage.setItem('fileName',record.fileName)
        const httpurl = this.url.download
        const params = {
          id:record.id,
          fileName: record.fileName,
          filePath:record.filePath
        }
        downLodaImg(httpurl, params).then(res => {
          if(res.code == 200)
          {
            this.$message.success('下载成功')
          }else
          {
            this.$message.error('下载失败')
          }
        })
      },
      // 删除
      handledelete(id) {
        const httpurl = this.url.delete
        const params = {id:id}
        deleteAction(httpurl,params).then((res)=>{
          if(res.code == 200)
          {
            this.$message.success(res.message)
            this.loadData();
          }else
          {
            this.$message.error(res.message)
          }
        })
  
      },
      onBirthdayChange(value, dateString) {
        this.queryParam.startDate = dateString[0]
        this.queryParam.endDate = dateString[1]
      },
      Black(){
        this.$router.go(-1)
      }
    }
  }
  </script>
  <style scoped>
  @import '~@assets/less/common.less';
  </style>
              